<template>
  <view class="goods" @click.stop="toGoodsDetail">
    <image class="cover" :src="info.imageUrl" />
    <view>
      <view class="goods-title">
        {{ info.name }}
      </view>
      <view class="goods-price">
        <view class="price">{{ info.lowestPrice }}</view>
        <view class="cart" @click.stop="add2Cart">
          <image :src="ossImg('others/component/cart.png')" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
import { ossImg } from "@/utils/utils";

const emits = defineEmits(["add"]);
const props = defineProps({
  info: {
    type: Object,
    default: () => ({}),
  },
});

const add2Cart = async () => {
  getApp().emdlz("track", "event", "store_page", "click", "cart", "");
  console.log(111, props.info);
  emits("add", props.info);
};

const toGoodsDetail = async () => {
  getApp().emdlz(
    "track",
    "event",
    "points_store_page",
    "click",
    `product_${props.info.id}`,
    ""
  );

  for (const res of props.info.productSkus) {
    getApp()
      .sr()
      .track("trigger_sku_component", {
        sku: {
          sku_id: res.id, // 若商品无sku_id时，可传spu_id信息
          sku_name: skuLabel(res.spData), // 若商品无sku_name时，可传spu_name信息
        },
        spu: {
          spu_id: res.id, // 若商品无spu_id时，可传sku_id信息
          spu_name: skuLabel(res.spData), // 若商品无spu_name时，可传sku_name信息
        },
      });
  }

  uni.navigateTo({ url: `/pages/goods/goods?id=${props.info.id}` });
};

const skuLabel = (skuData) => {
  return skuData.map(({ value, key }) => `${key}${value}`).join(" ");
};
</script>

<style lang="less" scoped>
@import "@/static/css/theme.less";

.goods {
  display: flex;
  align-items: center;
  height: 88px;

  .cover {
    width: 88px;
    height: inherit;
    margin-right: 10px;
  }

  & > view {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .goods-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #222222;
    font-size: 14px;
  }

  .goods-price {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    .price {
      color: @primary-color;
      font-size: 16px;
      font-weight: bold;
      position: relative;
      letter-spacing: 1px;

      &::before {
        content: "¥";
        font-size: 12px;
      }
    }

    .cart {
      width: 40px;
      height: 40px;
      background: #e4ecf9;
      border-radius: 40px 0 0 0;
      position: relative;
      z-index: 10;
      image {
        width: 14px;
        height: 14px;
        position: absolute;
        top: 17px;
        right: 10px;
      }
    }
  }
}
</style>
